
<template>
    <theme-box title="文章添加">
        <div class="box-body">
            <form class="form-inline" @submit.prevent v-el:form>
                <!-- <form-checkbox title="发布应用" :required="true" :options="agentOptions" name="checkbox" :value.sync="deployAgent" v-ref:deploy-agent></form-checkbox> -->
                <!-- <form-select title="相关" :required="true" v-if="docFlagShow" name="docFlag" :options.sync="docFlagOptions" :value.sync="docFlag" v-ref:doc-flag></form-select> -->
                <form-group title="商户号" :required="true">
          				<select name="mchtId" class="form-control" style="max-width: 265px">
          							<option v-for="mcht in mchtList" :value="mcht.value">
          								{{mcht.key | option-value 23}}
          							</option>
          					</select>
          			</form-group>
                <!--<form-select title="商户号" :sreach="true" name="mchtId" :options="mchtList" :value.sync="mchtIdValue"></form-select>-->
                <form-input title="文章标题" v-show="title" :required="true" name="docTitle" v-ref:doc-title></form-input>
                <form-input title="文章作者" name="docAuthor" v-ref:doc-author></form-input>
                <!--<form-select title="文档类型" :required="true" :options="typeOptions" name="docType" :value.sync="types" v-ref:doc-type></form-select>-->
                <form-group title="文章封面"  :required="true" name="file">
                    <file-upload  v-ref:fileupload class="fileImg" styles="width: 265px"></file-upload>
                </form-group>
                <form-textarea title="文章描述"  name="docDesc" v-ref:doc-desc :required="true"></form-textarea>
                <form-textarea title="文章内容" :required="true" name="docContent" v-if="!content"></form-textarea>
            </form>
            <div class="form-horizontal" style="max-width:79%;margin-left: 14px" v-show="content">
                <form-group :required="true" title="文章内容">
                    <html-edit v-ref:note :content.sync="htmlContent" height="150" style="margin-left:165px;margin-top: -22px"></html-edit>
                </form-group>
            </div>
        </div>
            <!-- /.box-body -->
        <div class="box-footer">
            <v-button type="reset" @click="reset">重置</v-button>
            <v-button theme="primary" class="pull-right" @click="submit">确认</v-button>
        </div>

            <!-- /.box-footer -->
    </theme-box>

</template>

<script>
    import summernote from "pages/partial/summernote.vue";
    import {dateTime} from 'ui/collections/general.js'

    var serialize = require('form-serialize');

    export default {
        data: () => ({
            mchtIdValue:'',
            mchtList: [],
            deployAgent: [],
            text: "",
            img: true,
            title: true,
            content: true,
            htmlContent: "",
            types: "",
            flags: "",
            docFlag: "",
            docFlagShow: false,
            docFlagOptions: [],
            mchtOptions: [
                {key: "傣妹火锅", value: "10000000"}
            ],
            typeOptions: [
                {key: "html", value: "0"},
                {key: "text", value: "1"}
            ],
            item: {}
        }),
        methods: {
            reset () {
                $("label.error").remove();
                this.$els.form.reset();
                this.$refs.note.reset()
            },
            getMcht (data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {
                });
            },
            async submit () {
                var self = this;
                if (!$(this.$els.form).valid()) {
                    return false
                }
                if ((this.htmlContent && this.$refs.note.placeholder != "3000" && this.$refs.note.placeholder >= 0) || this.types != 0) {
                    // var _data = serialize(this.$els.form, { hash: true, empty:true  });
                    let formData = new FormData(this.$els.form);
                    if (this.content) {
                        formData.append("docContent", this.htmlContent);
                    }
                    if (!this.docFlagShow) {
                        formData.append("docFlag", "")
                    }
                    let length = (eval(this.deployAgent.join('+')) + "").length;
                    let deployAgent;
                    switch (length) {
                        case 1:
                            deployAgent = "0000" + eval(this.deployAgent.join('+'));
                            break;
                        case 2:
                            deployAgent = "000" + eval(this.deployAgent.join('+'));
                            break;
                        case 3:
                            deployAgent = "00" + eval(this.deployAgent.join('+'));
                            break;
                        default :
                            deployAgent = "00000";
                    }
//                formData.append("deployAgent",deployAgent)
                    if (formData.delete) {
                        formData.delete("checkbox")
                    }
                    loading(true);
                    var result = await this.$post({
                        url: "/api/v1" + projectName_Url + "/plat/doc/add",
                        data: formData,
                        method: "POST"
                    }).then(response => {
                        let data = {
                            title: "操作成功",
                            content: "是否进入文章列表查看?"
                        }
                        self.reset();
                        Midway.confirm(data).then(function () {
                            self.$route.router.go('/publish-articles/list');
                        })
                    }).then(() => loading(false)).catch(() => loading(false));
                } else if (this.$refs.note.placeholder <= 0) {
                    Midway.alert({title: "温馨提示", content: "文章内容超出字数限制"})
                } else {
                    Midway.alert({title: "温馨提示", content: "文章内容不能为空"})
                }
            }
        },
        watch: {
            flags (value) {
                if (value == 6) {
                    this.title = true;
                    this.img = false;
                    this.$set("docFlagShow", true);
                    this.docFlagOptions = [
                        {key: "公司简介", value: "5"},
                        {key: "企业文化", value: "6"}
                    ];
                    this.docFlag = "5";
                } else if (value == 4) {
                    this.title = false;
                    this.img = true;
                    this.$set("docFlagShow", true);
                    // this.$refs.docTitle.reset();
                    this.docFlagOptions = [
                        {key: "新用户安装指南", value: "1"},
                        {key: "其它业务流程", value: "2"},
                        {key: "燃气安装常识", value: "3"},
                        {key: "燃气价格", value: "4"}
                    ];
                    this.docFlag = "1";
                } else {
                    this.$set("docFlagShow", false);
                    this.docFlagOptions = [];
                    this.title = true;
                    this.img = true;
                }
                if (value == "5") {
                    $(this.$els.form.docDesc).rules("add", {
                        required: true,
                        stringMaxLength: 512
                    })
                    $(this.$els.form.docDesc).valid()
                } else {
                    $(this.$els.form.docDesc).rules("remove", "required")
                    $(this.$els.form.docDesc).valid()
                }
            },
            types (v) {
                if (v == "0") {
                    this.content = true;
                } else {
                    this.content = false;
                    this.$refs.note.reset();
                }
            }
        },
        components: {
            "html-edit": summernote
        },
        ready () {
            dateTime()
            var self = this;
            self.getMcht();
            $(this.$els.form).validate(self.item.valdate = {
                errorPlacement: function (error, element) {
                    console.log(element.next());
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else if (element.attr("name") == "docDesc") {
                        element.next().append(error)
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    docTitle: {
                        required: true,
                        stringMaxLength: 45
                    },
                    docType: {
                        required: true
                    },
                    docContent: {
                        required: true,
                        stringMaxLength: 3000
                    },
                    file: {
                        required: true
                    },
                    docAuthor: {
                        stringMaxLength: 45
                    },
                    docDesc: {
                        required: true,
                        stringMaxLength: 128
                    }
                },
                messages: {
                    file: {
                        required: "请选择附件"
                    }
                }
            });
        }
    }
</script>
